<template>
<!-- 登录组件 -->
    <div>
        <div class="allbox">
            <div class="allbox-item">

                <i class="icon-comm-close-thin icon-pop-comm-close" @click="addexit"></i>
                <div class="yhtop">
                    <span>用户登录</span>
                </div>

                <div class="yhbottom">
                    <div class="QrCode">
                        <div class="QrCode-top">
                            <p>打开看漫画APP—我的—扫一扫<em class="ift-help-tip"></em></p>
                            <div class="QrCode-img">
                                <img src="../assets/img/下载.png" alt="">
                                <img src="../assets/img/logo.png" alt="" class="alllogo">
                            </div>
                        </div>
                        <div class="QrCode-bottom">
                            <span>未安装APP？</span>
                            <p>
                                <span>点此下载</span>
                                <em class="ift-right"></em>
                            </p>
                        </div>
                    </div>
                    <div class="fg"></div>
                    <div class="bot-input">
                        <div class="youaccount">
                            <input type="text" placeholder="请输入通行证账号、手机号码、邮箱" v-model="phone">
                        </div>
                        
                        <div class="youpassword">
                            <input :type='eyedata?"password":"text"' placeholder="请输入密码" v-model="password">
                            <span :class="[{'ift-eye-close':eyedata},{'ift-eye-open':!eyedata}]" @click="addopen"></span>
                        </div>
                        <!-- 密码；暗号 -->
                        <div class="cypher">
                            <span>忘记密码?</span>
                        </div>
                        <button @click="addJump">登录</button>
                        <div class="way">
                            <span>手机验证码登录</span>
                            <span v-show="false">使用密码登录</span>
                        </div>
                        
                    </div>
                    <div class="bot-Login">
                        <p class="LoginMethod">
                            其它登录方式
                        </p>
                        <ul class="Software clearfix">
                            <li>
                                <span class="ift-qq"></span>
                            </li>
                            <li>
                                <span class="ift-wechat"></span>
                            </li>
                            <li>
                                <span class="ift-sina"></span>
                            </li>
                        </ul>
                        <p class="explain">使用以上任意登录方式登录均代表您已阅读并同意本APP <a href="https://www.kanman.com/about/409276.html">《用户协议》</a></p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                eyedata: true, // 密码框是否加密
                phone:'',
                password:'',
            };
        },
        methods:{
            // 退出方法
            addexit(){
                this.$emit('loginmethod');
                window.localStorage.removeItem("userstate");
            },
            // 密码框是否加密
            addopen(){
                this.eyedata = !this.eyedata
            },
            // 跳转个人中心
            addJump(){
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                
                let pass = /^[a-zA-Z0-9]\w{8,17}$/;
             
                if(!reg.test(this.phone) || !pass.test(this.password) ){
                    window.alert("请输入正确手机号码与密码");
                    return;
                }
                console.log("成功");
                window.localStorage.setItem("username","@瓜呆");
                window.localStorage.setItem("userId","279842212");
                window.localStorage.setItem("userstate",true)
                window.alert("登陆成功");
                this.$router.push("/micenter");
           
            }
        }
    }
</script>

<style lang="scss" scoped>
.allbox{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.8);
    z-index: 1000;
   
}
.allbox .allbox-item{
    width: 871px;
    height: 571px;
    background-color:#fff;
    margin: 5% auto; 
    z-index: 1000000;
    position: relative; 
    border-radius: 5px;
}
.allbox .allbox-item .yhtop{
    width: 871px;
    font-size: 32px;
    height: 42px;
    line-height: 42px;
    padding-top: 24px;
    text-align: center;
    color: #333;
}
.allbox .allbox-item i{
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 16px;
}
.allbox .allbox-item .yhbottom{
    width: 871px;
    padding: 47px 0 20px;
    background: #ffffff;
}
.allbox .allbox-item .yhbottom .QrCode{
    width: 268px;
    padding-left: 66px;
    padding-right: 99px;
    float: left;
    text-align: center;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-top{
    height: 251px;
    background-image: url(../assets/img/qrcode_bg.png);
    background-size: 100%;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-top p{
    display: inline-block;
    padding-top: 51px;
    font-size: 14px;
    color: #666;
    position: relative;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-img {
    position: relative;
    margin: 8px auto 0;
    height: 156px;
    width: 156px;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-img .alllogo{
    position: absolute;
    left: 54px;
    top: 54px;
    width: 40px;
    height: 40px;
    background-color: #fff;
    padding: 8px;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-bottom{
    height: 20px;
    margin-top: 14px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-bottom p{
    display: inline-block;
    color: #fc6976;
}
.allbox .allbox-item .yhbottom .QrCode .QrCode-bottom p em{
    display: inline-block;
    width: 12px;
    height: 12px;
    font-size: 12px;
}
.allbox .allbox-item .yhbottom .fg{
    float: left;
    position: relative;
    width: 1px;
}
.allbox .allbox-item .yhbottom .fg:after{
    content: "";
    position: absolute;
    right: 0;
    top: 25px;
    bottom: 0;
    width: 1px;
    height: 260px;
    background-color: #ddd;
}
.allbox .allbox-item .yhbottom .bot-input{
    float: left;
    width: 342px;
    padding-top: 33px;
    padding-left: 54px;
    padding-right: 40px;
}
.allbox .allbox-item .yhbottom .bot-input .youaccount {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
}
.allbox .allbox-item .yhbottom .bot-input .youaccount input{
    width: 320px;
    height: 18px;
    line-height: 40px;
    padding: 11px;
    font-size: 14px;
    color: #333333;
    border: 0;
}
.allbox .allbox-item .yhbottom .bot-input .youpassword {
    width: 100%;
    height: 40px;
    border: 1px solid #ddd;
    margin-top:28px ;
    position: relative;
}
.allbox .allbox-item .yhbottom .bot-input .youpassword input{
    width: 300px;
    height: 18px;
    line-height: 40px;
    padding: 11px;
    font-size: 14px;
    color: #333333;
    border: 0;
}
.allbox .allbox-item .yhbottom .bot-input .youpassword span{
    color: #fc6976;
    position: absolute;
    top: 12px;
    right:10px;
    cursor: pointer;
}
.allbox .allbox-item .yhbottom .bot-input .cypher{
    margin-bottom: 16px;
    margin-top: 8px;
    color: #fc6976;
    font-size: 14px;
    text-align: right;
}
.allbox .allbox-item .yhbottom .bot-input button{
    width: 100%;
    height: 42px;
    font-size: 16px;
    line-height: 42px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
    background-color: #fc6976;
    margin-top: 24px;
    margin-bottom: 16px;
    border-radius:21px ;
    border: 0;
}
.allbox .allbox-item .yhbottom .bot-input .way{
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #fc6976;
    cursor: pointer;
}
.allbox .allbox-item .yhbottom .bot-Login{
    float: left;
    margin-top: 32px;
    margin-left: 41px;
    margin-right: 41px;
    width: 789px;
    height: 117px;
    text-align: center;

}
.allbox .allbox-item .yhbottom .bot-Login .LoginMethod{
    width: 100%;
    height: 19px;
    text-align: center;
    position: relative;
    line-height: 19px;
    color: #b6b6b6;
}
.allbox .allbox-item .yhbottom .bot-Login .LoginMethod::before{
    content: "";
    position: absolute;
    right: 0;
    top: 9px;
    width: 320px;
    height: 1px;
    background: #ddd;
}
.allbox .allbox-item .yhbottom .bot-Login .LoginMethod::after{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 320px;
    height: 1px;
    background: #ddd;
}
.allbox .allbox-item .yhbottom .bot-Login .Software{
    width: 100%;
    height: 40px;
    margin: 24px 0 16px;
}
.allbox .allbox-item .yhbottom .bot-Login .Software li{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 38px;
    margin: 0 20px;
    color: #fff;
    border-radius:  50% ;
    font-size: 24px;
}
.allbox .allbox-item .yhbottom .bot-Login .Software li:nth-child(1){
    background-color: #4ec6ff;
}
.allbox .allbox-item .yhbottom .bot-Login .Software li:nth-child(2){
    background-color: #40d4ab;
}
.allbox .allbox-item .yhbottom .bot-Login .Software li:nth-child(3){
    background-color: #fe6289;
}
.allbox .allbox-item .yhbottom .bot-Login .explain{
    color: #b6b6b6;
    line-height: 18px;
    font-size: 12px;
}
.allbox .allbox-item .yhbottom .bot-Login .explain a{
    color: #fc6976;
    line-height: 18px;
}
</style>